<template>
  <div class="about">
    <GeoLocation/>
    <div>
    <p>
      <span>{{location.name}}</span>
      实时天气
    </p>
    <h3>
      最后更新时间：{{updateTime}}
    </h3>
  </div>
  <div>
    <i :class="iconName"></i>
    <p>
      温度：{{now.temp}}℃
    </p>
    <p>
      体感温度：{{now.temp}}℃ 
    </p>
    <p>
      风向：{{now.windDir}}
    </p>
    <p>
      风力等级：{{now.windScale}}
    </p>
    <p>
      风速：{{now.windScale}}公里/小时
    </p>
    <p>
      能见度：{{now.vis}}公里
    </p>
  </div>
  </div>

</template>

<script>
import { API_NOW,KEY } from "@/common/constrant";
import axios from "axios";
import { mapState } from 'vuex';
import dayjs from 'dayjs';
import"qweather-icons/font/qweather-icons.css";
import GeoLocation from '@/components/GeoLocation.vue';


export default{
   components: {
    GeoLocation},
  data(){
    return{
      now:{},
    };
  },
  computed:{
    ...mapState([
      "location"
    ]),
    updateTime:function(){
      return dayjs(this.now.obsTime).format("YYYY/MM/DD HH:mm:ss");
    },
    iconName:function(){
      return "qi-" + this.now.icon;
    },
  },
  created(){
    this.getData();
  },
  methods:{
    getData(){
      axios
      .get(API_NOW,{
        params:{
          key:KEY,
          location:this.location.id,
          },
}).then((res)=>{
  console.log(res.data);
  this.now = res.data.now;
});
    }
  }
}
</script>
<style scoped>
i {
  font-size: 2rem;
  color: red;
}
</style>
